<ng-template #defaultRenderList>
  <ul *ngIf="stat.shownCount > 0" class="apes-transfer-list-content">
    <div class="LazyLoad" *ngFor="let item of dataSource">
      <li *ngIf="!item.hide" (click)="onItemSelect(item)"
          class="apes-transfer-list-content-item" [ngClass]="{'apes-transfer-list-content-item-disabled': disabled || item.disabled}">
        <label apes-checkbox [apesChecked]="item.checked" (apesCheckedChange)="onItemSelect(item)"
               (click)="$event.stopPropagation()" [apesDisabled]="disabled || item.disabled">
          <ng-container *ngIf="!render; else renderContainer">{{ item.title }}</ng-container>
          <ng-template #renderContainer [ngTemplateOutlet]="render" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
        </label>
      </li>
    </div>
  </ul>
  <div *ngIf="stat.shownCount === 0" class="apes-transfer-list-body-not-found">
    <apes-embed-empty [apesComponentName]="'transfer'" [specificContent]="notFoundContent"></apes-embed-empty>
  </div>
</ng-template>
<div class="apes-transfer-list-header">
  <label *ngIf="showSelectAll" apes-checkbox [apesChecked]="stat.checkAll" (apesCheckedChange)="onItemSelectAll($event)"
         [apesIndeterminate]="stat.checkHalf" [apesDisabled]="stat.shownCount == 0 || disabled">
  </label>
  <span class="apes-transfer-list-header-selected">
    <span>{{ (stat.checkCount > 0 ? stat.checkCount + '/' : '') + stat.shownCount }} {{ dataSource.length > 1 ? itemsUnit : itemUnit }}</span>
    <span *ngIf="titleText" class="apes-transfer-list-header-title">{{ titleText }}</span>
  </span>
</div>
<div class="{{showSearch ? 'apes-transfer-list-body apes-transfer-list-body-with-search' : 'apes-transfer-list-body'}}"
     [ngClass]="{'apes-transfer__nodata': stat.shownCount === 0}">
  <div *ngIf="showSearch" class="apes-transfer-list-body-search-wrapper">
    <div apes-transfer-search
         (valueChanged)="handleFilter($event)"
         (valueClear)="handleClear()"
         [placeholder]="searchPlaceholder"
         [disabled]="disabled"
         [value]="filter"></div>
  </div>
  <ng-container *ngIf="renderList else defaultRenderList">
    <div class="apes-transfer-list-body-customize-wrapper">
      <ng-container *ngTemplateOutlet="renderList; context: {
        $implicit: dataSource,
        direction: direction,
        disabled: disabled,
        onItemSelectAll: onItemSelectAll,
        onItemSelect: onItemSelect,
        stat: stat
      }"></ng-container>
    </div>
  </ng-container>
</div>
<div *ngIf="footer" class="apes-transfer-list-footer">
  <ng-template [ngTemplateOutlet]="footer" [ngTemplateOutletContext]="{ $implicit: direction }"></ng-template>
</div>
